<template>
	<div class="personal">
		<div class="user-ccontainer">
			<div class="menu">
				<div class="menu-item" :class="[activeMenu == '1' ? 'active' : '']" @click="handleMenuChange('1')"><i class="el-icon-s-operation"></i>我的课程</div>
				<!-- <div class="menu-item" :class="[activeMenu == '2' ? 'active' : '']" @click="handleMenuChange('2')"><i class="el-icon-star-on"></i>我的收藏</div> -->
				<div class="menu-item" :class="[activeMenu == '3' ? 'active' : '']" @click="handleMenuChange('3')"><i class="el-icon-s-comment"></i>我的评价</div>
			</div>
			<div class="content">
				<MyCourse  v-if="activeMenu == '1'"/>
				<Comment v-if="activeMenu == '3'"/>
			</div>
		</div>
	</div>
</template>

<script>
import MyCourse from "./myCourse.vue";
import Comment from './comment.vue';
export default {
	name: 'Personal',
	components: {
		MyCourse,
		Comment
	},
	data() { 
		return {
			//用户名
			username: '若以',
			//选择导航
			activeMenu: '1'
		}
	},
	methods: {
		/**
		 * 菜单切换
		 */
		handleMenuChange(val) { 
			this.activeMenu = val;
		}
	}
}
</script>

<style lang="scss" scoped>
.personal {
	width: 100%;
	.user-ccontainer {
		width: 1230px;
		height: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		padding: 50px 0;
		.menu {
			width: 200px;
			.menu-item {
				width: 100%;
				height: 40px;
				line-height: 40px;
				cursor: pointer;
				color: #787d82;
				font-size: 16px;
				padding-left: 20px;
				margin-bottom: 10px;
				&.active {
					color: #fff;
					background-color: #97c225;
				}
				> i {
					margin-right: 10px;
				}
			}
		}
		.content {
			width: calc(100% - 220px);
			margin-left: 20px;
			border-left: 1px solid #ccc;
			min-height: 400px;
			padding-left: 15px;
		}
	}
}
</style>